import { statisticsModel } from '@/models/StatisticsModel'
import { Column, Pie } from '@ant-design/charts'
import { PageContainer, ProCard, ProColumns, ProTable, Statistic } from '@ant-design/pro-components'

import SellerTable from '@/pages/Statistics/component/SellerTable'
import { observer } from 'mobx-react-lite'
import { OperateStatisticsBO } from '../../../types/Statistics'

const OrderUserPie = observer(() => {
  return (
    <Pie
      angleField={'value'}
      colorField={'userName'}
      data={statisticsModel.orderUserPieData}
      legend={false}
      label={{
        type: 'inner',
        offset: '-30%',
        content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
        style: {
          fontSize: 14,
          textAlign: 'center',
        },
      }}
      onReady={(chart) => {
        chart.on('element:click', (args: { data: { data: { userName: any } } }) => {
          let { userName } = args.data.data
          statisticsModel.setOrderFilterUserName(userName)
        })
      }}
      interactions={[
        {
          type: 'element-active',
        },
      ]}
    />
  )
})

const ChannelUserPie = observer(() => (
  <Pie
    angleField={'value'}
    colorField={'userName'}
    data={statisticsModel.channelUserPieData}
    legend={false}
    label={{
      type: 'inner',
      offset: '-30%',
      content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    }}
    onReady={(chart) => {
      chart.on('element:click', (args: { data: { data: { userName: any } } }) => {
        let { userName } = args.data.data
        console.log(userName)
        statisticsModel.setChannelFilterUserName(userName)
      })
    }}
    interactions={[
      {
        type: 'element-active',
      },
    ]}
  />
))

const ChannelColumn = observer(() => (
  <Column
    xField={'channelName'}
    yField={'value'}
    data={statisticsModel.channelTableData}
    isPercent={statisticsModel.isPercent}
    isStack
    seriesField={'followUpType'}
    meta={{
      value: {
        min: 0,
      },
    }}
    label={{
      content: (it) => (statisticsModel.isPercent ? `${(it.value * 100).toFixed(2)}%` : `${it.value}个`),
    }}
    connectedArea={{
      style: (o) => ({
        fill: 'rgba(0,0,0,0.25)',
        stroke: o.fill,
        lineWidth: 0.5,
      }),
    }}
  />
))

const OrderPhotoTypePie = observer(() => (
  <Pie
    angleField={'value'}
    colorField={'photoType'}
    data={statisticsModel.orderPhotoTypePieData}
    label={{
      type: 'inner',
      offset: '-30%',
      content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    }}
    interactions={[
      {
        type: 'element-active',
      },
    ]}
  />
))

const OrderGoodsPie = observer(() => (
  <Pie
    angleField={'value'}
    colorField={'goodsName'}
    data={statisticsModel.orderGoodsPieData}
    label={{
      type: 'inner',
      offset: '-30%',
      content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    }}
    interactions={[
      {
        type: 'element-active',
      },
    ]}
  />
))

const OrderColumn = observer(() => (
  <Column
    xField="photoType"
    yField="count"
    seriesField="userName"
    isStack
    isPercent={statisticsModel.orderIsPercent}
    data={statisticsModel.orderColumnData}
    meta={{
      value: {
        min: 0,
      },
    }}
    label={{
      content: (it) => (statisticsModel.orderIsPercent ? `${(it.count * 100).toFixed(2)}%` : `${it.count}个`),
    }}
    connectedArea={{
      style: (o) => ({
        fill: 'rgba(0,0,0,0.25)',
        stroke: o.fill,
        lineWidth: 0.5,
      }),
    }}
  />
))
const columns: ProColumns<OperateStatisticsBO>[] = [
  {
    title: '渠道名',
    dataIndex: 'channelName',
  },
  {
    title: '渠道目标',
    dataIndex: 'channelTarget',
  },
  {
    title: '渠道当前客资',
    dataIndex: 'channelCurrent',
  },
  {
    title: '客资完成度',
    dataIndex: 'targetPre',
    valueType: 'progress',
  },
  {
    title: '渠道预算',
    dataIndex: 'channelBudget',
    valueType: 'money',
  },
  {
    title: '投放金额',
    dataIndex: 'channelDeliverFee',
    valueType: 'money',
  },
  {
    title: '渠道业绩',
    dataIndex: 'orderAchievement',
    renderText: (text, record) => (
      <>
        {`¥${text}`}
        <Statistic
          title="月环比"
          value={`${record.orderAchievementMoM}%`}
          trend={record.orderAchievementMoM > 0 ? 'up' : 'down'}
        />
      </>
    ),
  },
  {
    title: '投产比',
    dataIndex: 'channelROI',
  },
  {
    title: '单粉目标',
    dataIndex: 'channelSignalTarget',
  },
  {
    title: '当前单粉成长',
    dataIndex: 'channelSignalValue',
    renderText: (text, record) => (
      <>
        {record.channelSignalValue || 0}
        <Statistic
          title="月环比"
          value={`${record.channelSignalMoM}%`}
          trend={record.channelSignalMoM > 0 ? 'up' : 'down'}
        />
      </>
    ),
  },
]

const StatisticsPage = () => {
  return (
    <PageContainer>
      <ProCard title="运营看板" direction="row" ghost wrap gutter={[10, 10]}>
        <ProCard headerBordered bordered>
          <ProTable
            pagination={false}
            dataSource={statisticsModel.operateData}
            columns={columns}
            search={false}
            toolBarRender={false}
            options={false}
            size="small"
          />
        </ProCard>
      </ProCard>
      <ProCard title={'销售看板'} split="horizontal" ghost>
        <SellerTable />
      </ProCard>
    </PageContainer>
  )
}

export default observer(StatisticsPage)
